<template>
  <Row type="flex">
    <Col span="8">
      <FormItem>
        <Select :key="Math.random()" v-model="formValidate.province" :label-in-value="true" @on-change="selectProvince" filterable style="width:96%" placeholder="请选择省份" >
          <Option v-for="item in cityList.provinceList" :value="item.cityCode" :key="item.cityCode" :label="item.cityName"></Option>
        </Select>
      </FormItem>
    </Col>
    <Col span="8">
      <FormItem>
        <Select :key="Math.random()" v-model="formValidate.city" :label-in-value="true" @on-change="selectCity" filterable style="width:96%" placeholder="请选择市" >
          <Option v-for="item in cityList.cityList" :value="item.cityCode" :key="item.cityCode" :label="item.cityName"></Option>
        </Select>
      </FormItem>
    </Col>
    <Col span="8">
      <FormItem>
        <Select :key="Math.random()" v-model="formValidate.area" :label-in-value="true" @on-change="selectArea" filterable style="width:96%" placeholder="请选择区/县" >
          <Option v-for="item in cityList.areaList" :value="item.cityCode" :key="item.cityCode" :label="item.cityName"></Option>
        </Select>
      </FormItem>
    </Col>
  </Row>
</template>
<script>
  import { citySel } from "@/views/operationsCenter/build/buildModules/common.js";
  export default {
    mixins: [ citySel ],
    props: ['type', 'InquireData'],
    components: {

    },
    data() {
      return {
        formValidate: {
          province: '',
          city: '',
          area: ''
        },
        selectObj: {
          type: this.type,
          selectVal: []
        }
      }
    },
    methods: {
      // 选择省
      selectProvince(params) {
        this.selectObj.selectVal = []
        let code = params.value
        this.selectObj.selectVal[0] = params
        this.$emit('provinceCityDistrictFun', this.selectObj);
        this.getareaCodeList(3,code)
      },
      // 选择市
      selectCity(params) {
        let code = params.value
        this.selectObj.selectVal[1] = params
        if (this.selectObj.selectVal[2]&&this.selectObj.selectVal[2].label) {
          this.selectObj.selectVal.splice(2, 1)
        }
        this.$emit('provinceCityDistrictFun', this.selectObj);
        this.getareaCodeList(4,code)
      },
      // 选择区
      selectArea(params) {
        let code = params.value
        this.selectObj.selectVal[2] = params
        this.$emit('provinceCityDistrictFun', this.selectObj);
        this.getareaCodeList(5,code)
      }
    },
    created() {
      // 获取省
      this.getareaCodeList();
      if (this.InquireData){
        if (this.InquireData.split(',').length == 3) {
          this.formValidate.province = this.InquireData.split(',')[0]
          this.getareaCodeList(3, this.InquireData.split(',')[0])
          this.formValidate.city = this.InquireData.split(',')[1]
          this.getareaCodeList(4, this.InquireData.split(',')[1])
          this.formValidate.area = this.InquireData.split(',')[2]
          this.getareaCodeList(5, this.InquireData.split(',')[2])
        }
      }
    },
  }
</script>
<style lang="scss" scoped>

</style>
